<template>
	<div
		class="toolbar md:px-[20px] px-[10px] h-[50px] text-lg rounded-b-[10px] bg-[#1B2538] flex items-center justify-between">
		<div class="flex gap-4 text-t-3">
			<!-- <n-tooltip trigger="hover" :y="200">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer" @click="handleBack">
						<base-icon name="back2" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('slotspre.back') }}</div>
			</n-tooltip> -->
			<div class="md:block hidden">
				<n-tooltip trigger="hover" :y="200">
					<template #trigger>
						<div
							class="h-8 w-8 flex items-center justify-center cursor-pointer"
							@click="handleFullScreen">
							<base-icon name="fullscreen" />
						</div>
					</template>
					<div class="px-4 py-2">{{ $t('casinoPre.fullscreen') }}</div>
				</n-tooltip>
			</div>
			<div class="md:block hidden">
				<n-tooltip trigger="hover">
					<template #trigger>
						<div
							class="h-8 w-8 flex items-center justify-center cursor-pointer"
							@click="handleMovie">
							<base-icon :class="isSelected ? 'text-t-1' : ''" name="widescreen" />
						</div>
					</template>
					<div class="px-4 py-2">
						{{ isSelected ? $t('casinoPre.closeMovie') : $t('casinoPre.openMovie') }}
					</div>
				</n-tooltip>
			</div>
			<!-- <n-tooltip trigger="hover">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon name="window" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('casinoPre.popupSubScreen') }}</div>
			</n-tooltip>
			<n-tooltip trigger="hover">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon name="statistics" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('casinoPre.openStatistics') }}</div>
			</n-tooltip> -->
			<n-tooltip trigger="hover" v-if="accountStore.isLogin">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon
							:name="props.data?.favourited ? 'love-filled' : 'love'"
							@click="handleCollect" />
					</div>
				</template>
				<div class="px-4 py-2">
					{{ props.data?.favourited ? $t('casinoPre.favGameCancel') : $t('casinoPre.favGame') }}
				</div>
			</n-tooltip>
		</div>
		<div class="flex justify-center items-center">
			<div v-show="tab === 'play'">
				<n-popover ref="popoverRef" trigger="click" placement="bottom-end" :show-arrow="false">
					<template #trigger>
						<div class="flex items-center mr-[10px]">
							<div
								class="flex items-center w-[90px] bg-bg-3 px-2 py-[5px] rounded-full app-bg-react text-sm h-[30px]"
								@click="show = !show">
								<base-currency class="mr-1" :currency="currency" />
								<div class="mr-3">{{ currency }}</div>
								<base-icon
									size="12"
									name="down"
									class="duration-300"
									:class="{
										'rotate-180': show
									}" />
							</div>
						</div>
					</template>
					<n-scrollbar class="w-[90px] max-h-[360px] rounded-sm">
						<div
							v-for="(item, index) in data?.supportedCurrencies"
							:key="index"
							class="flex items-center p-[10px] cursor-pointer hover:bg-bg-3"
							@click="handleCurrency(item)"
							:class="{
								'!bg-primary': item === currency
							}">
							<base-currency class="mr-1" :currency="item" />
							{{ item }}
						</div>
					</n-scrollbar>
				</n-popover>
			</div>
			<base-switch-tabs
				class="min-w-[140px] rounded-full bg-bg-3"
				style="--min-width: 140px; --height: 30px"
				:modelValue="tab"
				size="small"
				sizeIcon="16"
				@update:modelValue="handleChangeTab"
				:data="tabList"
				translation
				activeTextBold />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { BaseIcon, BaseSwitchTabs, BaseCurrency } from '@/components/base'
import { NTooltip, NPopover, NScrollbar, PopoverInst } from 'naive-ui'
import { useAccountStore } from '@/store'
import { favouriteAdd, favouriteRemove } from '@/api/other.ts'
import { showSuccess, showError } from '@/utils'
import { useI18n } from 'vue-i18n'

const show = ref(false)

const { t } = useI18n()
const tabList = [
	{
		id: 'play',
		name: 'slotsDetail.real',
		icon: 'dollar'
	},
	{
		id: 'demo',
		name: 'slotsDetail.fun',
		icon: 'game'
	}
]
const accountStore = useAccountStore()
const tab = ref('play')
const isSelected = ref(false)

const props = defineProps({
	type: {
		type: String,
		default: 'slots'
	},
	currentTab: {
		type: String,
		default: ''
	},
	data: {
		type: Object as any,
		default: () => {}
	},
	currency: {
		type: String,
		default: ''
	}
})

watch(
	() => props.currentTab,
	(val) => {
		if (val) {
			tab.value = val
		}
	}
)

watch(
	() => [accountStore.isLogin],
	() => {}
)
const popoverRef = ref<PopoverInst | null>(null)
const emits = defineEmits(['fullScreen', 'toMovie', 'collect', 'changePlayType', 'currencyChange'])
const handleChangeTab = (val: any) => {
	if (accountStore.isLogin) {
		if (tab.value !== val) {
			emits('changePlayType', val)
		}
		tab.value = val
	} else {
		emits('changePlayType', 'none')
	}
}
const handleFullScreen = () => {
	emits('fullScreen')
}

const handleMovie = () => {
	isSelected.value = !isSelected.value
	emits('toMovie', isSelected.value)
}

const handleCollect = async () => {
	let params = {
		gameId: props.data.id
	}
	props.data.favourited = !props.data.favourited
	try {
		props.data.favourited ? await favouriteAdd(params) : await favouriteRemove(params)
		showSuccess(t(props.data.favourited ? 'casinoPre.favGameAdded' : 'casinoPre.favGameRemoved'))
	} catch (err: any) {
		showError(err.msg)
	}
}
const handleCurrency = (item: any) => {
	show.value = false
	emits('currencyChange', item)
	popoverRef.value?.setShow(false)
}
onMounted(() => {
	accountStore.isLogin ? (tab.value = 'play') : (tab.value = 'demo')
})
</script>
<style lang="scss" scoped>
.toolbar {
	background-image: url('@/assets/img/slots/logo.svg');
	background-repeat: no-repeat;
	background-position: center 40%;
	background-size: 60px 38px;
}
@media (max-width: 768px) {
	.toolbar {
		background-image: none;
	}
}
</style>
